<template>
    <el-col v-bind="{...col, ...property.col}" @click.native="handleClick">
        <div class="vo-drag-view" :class="{'active': isActive}">
            <slot></slot>
            <div class="vo-drag-view-mask">
                <div class="vo-drag-view--title">
                    <slot name="title">
                        <span class="title" v-if="property">{{property.model}}</span>
                    </slot>
                </div>
                <div v-show="isActive" class="vo-drag-view--options top-right">
                    <!-- 拖动 -->
                    <i title="拖动" class="el-icon-rank options-btn drag-bar"></i>
                </div>
                <div v-show="isActive" class="vo-drag-view--options bottom-right">
                    <!-- 栅格 -->
                    <i title="添加" class="el-icon-plus options-btn" @click.stop="handleRowAdd"></i>
                    <!-- 复制 -->
                    <i title="复制" class="el-icon-document-copy options-btn" @click.stop="handleCopy"></i>
                    <!-- 删除 -->
                    <i title="删除" class="el-icon-delete options-btn" @click.stop="handleDelete"></i>
                </div>
            </div>
        </div>
    </el-col>
</template>

<script>
export default {
    name: 'VoDragFormItem',
    props: {
        selectProperty: Object,
        property: {
            type: Object
        },
        col: Object
    },
    data() {
        return {
        }
    },
    computed: {
        isActive() {
            return this.selectProperty ? this.selectProperty === this.property : false
        }
    },
    methods: {
        handleClick() {
            this.$emit('item-select', this.property)
        },
        handleDelete() {
            this.$emit('item-delete', this.property)
        },
        handleCopy() {
            this.$emit('item-copy', this.property)
        },
        handleRowAdd() {
            this.$emit('item-row-add', this.property)
        }
    }
}
</script>

<style lang="scss" scoped>
.vo-drag-view{
    position: relative;
    border: 2px dashed #F2F6FC;
    padding-top: 24px;
    min-height: 40px;
    &:hover{
        border-color: #0094ff;
    }
    &.active{
        border-style: solid;
        border-color: #0094ff;
    }
    .vo-drag-view-mask{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
    }
    .vo-drag-view--title{
        position: absolute;
        top: 0;
        left: 10px;
        .title{
            font-size: 12px;
            color: #67C23A;
        }
    }
    .vo-drag-view--options{
        background: #0094ff;
        color: #ffffff;
        position: absolute;
        padding: 4px;
        &.top-right{
            top: 0;
            right: 0;
            border-bottom-left-radius: 4px;
        }
        &.top-left{
            top: 0;
            left: 0;
            border-bottom-right-radius: 4px;
        }
        &.bottom-right{
            bottom: 0;
            right: 0;
            border-top-left-radius: 4px;
        }
        &.bottom-left{
            bottom: 0;
            left: 0;
            border-top-right-radius: 4px;
        }
        .options-btn{
            font-size: 16px;
            cursor: pointer;
            & + .options-btn{
                margin-left: 10px;
            }
            &:hover{
                color: #FFFFFF;
            }
        }
        .drag-bar{
            cursor: grab;
        }
    }
}
</style>
